<template>
    <div class="boardBox">
        <div class="boardItem">
            <div class="boardItemTop">
                <span class="boardItemTitle">员工管理</span>
            </div>
            <div class="boardItemValue">{{ datas1.total }}/200</div>
            <div style="display: flex;justify-content: center;margin-top: 28px;">
                <div ref="chartRef" style="width: 240px; height: 240px;margin-right: 60px;margin-left: 10%;"></div>
                <div style="flex: 1;">
                    <div class="flex flex-1 flex-wrap">
                        <div class="flex box-row-column num_kuai y1">
                            <div class="zi3">正式员工</div>
                            <div class="zi_num">{{ datas1.zs }}</div>
                        </div>
                        <div class="flex box-row-column num_kuai y2">
                            <div class="zi3">风险员工</div>
                            <div class="zi_num">{{ datas1.fx }}</div>
                        </div>
                        <div class="flex box-row-column num_kuai y3">
                            <div class="zi3">试用员工</div>
                            <div class="zi_num">{{ datas1.sy }}</div>
                        </div>

                        <div class="flex box-row-column num_kuai y4">
                            <div class="zi3">待离职员工</div>
                            <div class="zi_num">{{ datas1.dlz }}</div>
                        </div>
                        <div class="flex box-row-column num_kuai y5">
                            <div class="zi3">离职员工</div>
                            <div class="zi_num">{{ datas1.lz }}</div>
                        </div>
                    </div>
                    <div class="flex" style="margin-top: 12px;">
                        <div style="display: flex;align-items: flex-end;margin-right: 58px;">
                            <div class="zi3" style="margin-right: 8px;margin-bottom: 6px;">月流失率</div>
                            <div class="zi_num">{{ datas1.lsl }}%</div>
                        </div>
                        <div style="display: flex;align-items: flex-end;">
                            <div class="zi3" style="margin-right: 8px;margin-bottom: 6px;">月增员率</div>
                            <div class="zi_num">{{ datas1.zyl }}%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="boardItem">
            <div class="boardItemTop">
                <span class="boardItemTitle">司龄分布</span>
                <el-cascader style="width: 200px" placeholder="请选择部门" :options="deptoptions" :props="props1"
                    collapse-tags clearable v-model="dtVal1.dept_id" @change="handleChange1" ref="selectedArrRef1"
                    class="selectClass" />
                <el-date-picker class="dateClass" v-model="dtVal1.date" type="date" format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD" @change="getInfo6" placeholder="请选择日期">
                </el-date-picker>
                <span class="exportBtn" @click="exportData('company_age', dtVal1, '司龄分布')">导出</span>
            </div>
            <div ref="barCharts2" class="echartsClass1"></div>
        </div>
        <div class="boardItem">
            <div class="boardItemTop">
                <span class="boardItemTitle">员工变动</span>
                <el-cascader style="width: 200px" placeholder="请选择部门" :options="deptoptions" :props="props1"
                    collapse-tags clearable v-model="dtVal2.dept_id" @change="handleChange2" ref="selectedArrRef2" />
                <el-date-picker class="dateClass" v-model="dtVal2.date" format="YYYY" value-format="YYYY"
                    @change="getInfo7" type="year" placeholder="请选择年份">
                </el-date-picker>
                <span class="exportBtn" @click="exportData('change', dtVal2, '员工变动')">导出</span>
            </div>
            <div ref="lineCharts" class="echartsClass1"></div>
        </div>
        <div class="boardItem">
            <div class="boardItemTop">
                <span class="boardItemTitle">员工流失</span>
                <el-cascader style="width: 200px" placeholder="请选择部门" :options="deptoptions" :props="props1"
                    collapse-tags clearable v-model="dtVal3.dept_id" @change="handleChange3" ref="selectedArrRef3" />
                <el-date-picker class="dateClass" style="width: 200px" v-model="dtVal3.date" type="monthrange"
                    range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份" format="YYYY/MM"
                    value-format="YYYY-MM" @change="getInfo5">
                </el-date-picker>
                <span class="exportBtn" @click="exportData('lose', dtVal3, '员工流失')">导出</span>
            </div>
            <div ref="barCharts1" class="echartsClass1"></div>
        </div>
        <div class="boardItem">
            <div class="boardItemTop">
                <span class="boardItemTitle">员工分布</span>
                <el-cascader style="width: 200px" placeholder="请选择部门" :options="deptoptions" :props="props1"
                    collapse-tags clearable v-model="dtVal4.dept_id" @change="handleChange4" ref="selectedArrRef4" />
                <el-date-picker class="dateClass" style="width: 200px" v-model="dtVal4.date" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD" @change="getInfo4">
                </el-date-picker>
                <span class="exportBtn" @click="exportData('distribution', dtVal4, '员工分布')">导出</span>
            </div>
            <div ref="sexPie4" class="echartsClass"></div>
        </div>
        <div class="boardItem">
            <div class="boardItemTop">
                <span class="boardItemTitle">学历分布</span>
                <el-cascader style="width: 200px" placeholder="请选择部门" :options="deptoptions" :props="props1"
                    collapse-tags clearable v-model="dtVal5.dept_id" @change="handleChange5" ref="selectedArrRef5" />
                <el-date-picker class="dateClass" v-model="dtVal5.date" type="date" format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD" @change="getInfo3" placeholder="请选择日期">
                </el-date-picker>
                <span class="exportBtn" @click="exportData('resume_sub', dtVal5, '学历分布')">导出</span>
            </div>
            <div ref="sexPie3" class="echartsClass"></div>
        </div>
        <div class="boardItem">
            <div class="boardItemTop">
                <span class="boardItemTitle">年龄分布</span>
                <el-cascader style="width: 200px" placeholder="请选择部门" :options="deptoptions" :props="props1"
                    collapse-tags clearable v-model="dtVal6.dept_id" @change="handleChange6" ref="selectedArrRef6" />
                <el-date-picker class="dateClass" v-model="dtVal6.date" type="date" format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD" @change="getInfo2" placeholder="请选择日期">
                </el-date-picker>
                <span class="exportBtn" @click="exportData('age', dtVal6, '年龄分布')">导出</span>
            </div>
            <div ref="sexPie2" class="echartsClass"></div>
        </div>
        <div class="boardItem">
            <div class="boardItemTop">
                <span class="boardItemTitle">性别分布</span>
                <el-cascader style="width: 200px" placeholder="请选择部门" :options="deptoptions" :props="props1"
                    collapse-tags clearable v-model="dtVal7.dept_id" @change="handleChange7" ref="selectedArrRef7" />
                <el-date-picker class="dateClass" v-model="dtVal7.date" type="date" format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD" @change="getInfo1" placeholder="请选择日期">
                </el-date-picker>
                <span class="exportBtn" @click="exportData('sex', dtVal7, '性别分布')">导出</span>
            </div>
            <div ref="sexPie1" class="echartsClass"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount, reactive } from '@/TUIKit/adapter-vue';
import * as echarts from "echarts";
import { getDepartmentlist } from "@/api/cf";
import { exportFile } from '@/utils/format'
import { getStatistics, getChange, getCompanyAge, getLose, getDistribution, getResumeSub, getAge, getSex, statExport } from "@/api/xl";

const props1 = reactive({
    checkStrictly: true,
    emitPath: false,
    multiple: true,
    value: "id",
    label: "name",
    children: "children",
});
const sexPie1 = ref(null);
const sexPie2 = ref(null);
const sexPie3 = ref(null);
const sexPie4 = ref(null);
const barCharts1 = ref(null);
const barCharts2 = ref(null);
const lineCharts = ref(null);
const chartRef = ref(null);
const deptoptions = ref([]);
const datas1 = ref({})
const datas2 = ref({})
const datas3 = ref({})
const datas4 = ref({})
const datas5 = ref({})
const datas6 = ref({})
const datas7 = ref({})
const datas8 = ref({})
const selectedArrRef1 = ref(null);
const selectedArrRef2 = ref(null);
const selectedArrRef3 = ref(null);
const selectedArrRef4 = ref(null);
const selectedArrRef5 = ref(null);
const selectedArrRef6 = ref(null);
const selectedArrRef7 = ref(null);
let chartInstance1 = null;
let chartInstance2 = null;
let chartInstance3 = null;
let chartInstance4 = null;
let chartInstance5 = null;
let chartInstance6 = null;
let chartInstance7 = null;
let chartInstance8 = null;
const dtVal1 = ref({
    dept_id: '',
    date: ''
})
const dtVal2 = ref({
    dept_id: '',
    date: ''
})
const dtVal3 = ref({
    dept_id: '',
    date: ''
})
const dtVal4 = ref({
    dept_id: '',
    date: ''
})
const dtVal5 = ref({
    dept_id: '',
    date: ''
})
const dtVal6 = ref({
    dept_id: '',
    date: ''
})
const dtVal7 = ref({
    dept_id: '',
    date: ''
})
const handleChange1 = () => {
    selectedArrRef1.value.togglePopperVisible();
    getInfo6()
}
const handleChange2 = () => {
    selectedArrRef2.value.togglePopperVisible();
    getInfo7()
}
const handleChange3 = () => {
    selectedArrRef3.value.togglePopperVisible();
    getInfo5()
}
const handleChange4 = () => {
    selectedArrRef4.value.togglePopperVisible();
    getInfo4()
}
const handleChange5 = () => {
    selectedArrRef5.value.togglePopperVisible();
    getInfo3()
}
const handleChange6 = () => {
    selectedArrRef6.value.togglePopperVisible();
    getInfo2()
}
const handleChange7 = () => {
    selectedArrRef7.value.togglePopperVisible();
    getInfo1()
}
const exportData = (name, datas, names) => {
    ElMessageBox.confirm(
        '是否确认导出所有数据项?',
        '导出',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            statExport({
                export_type: name,
                ...datas
            }).then(res => {
                exportFile(res, names + '.xlsx')
            });
        })
        .catch(() => {

        })
}

const getInfo1 = () => {
    getSex(dtVal7.value).then(res => {
        datas8.value = res.data;
        // 初始化 echarts 实例
        chartInstance1 = echarts.init(sexPie1.value);

        // 配置项
        const option = {
            textStyle: {
                fontSize: 16
            },
            series: [
                {
                    name: "性别分布",
                    type: "pie",
                    radius: "80%",
                    right: "25%",
                    label: {
                        formatter: (params: any) => {
                            if (Number(params.value) === 0) {
                                return '';
                            } else {
                                return `${params.percent.toFixed(2)}%`;
                            }
                        },
                        textStyle: {
                            fontSize: 16,
                            color: '#999999'
                        },
                        position: (params: any) => {
                            // 根据扇区角度大小决定位置
                            return params.percent > 10 ? 'inside' : 'outside';
                        }
                    },
                    data: datas8.value,
                },
            ],
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(255,255,255,0.9)',
                textStyle: { color: '#333' },
                borderColor: '#eee',
                borderWidth: 1,
                padding: 10,
                // 自定义tooltip格式
                formatter: (params) => {
                    return `
                        <div style="font-weight:bold">${params.name}</div>
                        <div>占比: ${parseFloat(params.value).toFixed(2)}%</div>
                        <div>人数: ${params.data.count}</div>
                         `;
                }
            },
            legend: {
                orient: 'horizontal',
                right: '18%',         // 整体靠右对齐
                align: 'left',
                icon: 'circle', // 设置为圆形标记
                itemWidth: 8,  // 标记宽度
                itemHeight: 8, // 标记高度
            },
        };

        // 使用配置项渲染图表
        chartInstance1.setOption(option);
    })
}

const getInfo2 = () => {
    getAge(dtVal6.value).then(res => {
        datas7.value = res.data;
        // 初始化 echarts 实例
        chartInstance2 = echarts.init(sexPie2.value);

        // 配置项
        const option = {
            textStyle: {
                fontSize: 16
            },
            series: [
                {
                    name: "年龄分布",
                    type: "pie",
                    radius: "80%",
                    right: "25%",
                    label: {
                        formatter: (params: any) => {
                            if (Number(params.value) === 0) {
                                return '';
                            } else {
                                return `${params.percent.toFixed(2)}%`;
                            }
                        },
                        textStyle: {
                            fontSize: 16,
                            color: '#999999'
                        },
                        position: (params: any) => {
                            // 根据扇区角度大小决定位置
                            return params.percent > 10 ? 'inside' : 'outside';
                        }
                    },
                    data: datas7.value,
                },
            ],
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(255,255,255,0.9)',
                textStyle: { color: '#333' },
                borderColor: '#eee',
                borderWidth: 1,
                padding: 10,
                // 自定义tooltip格式
                formatter: (params) => {
                    return `
                        <div style="font-weight:bold">${params.name}</div>
                        <div>占比: ${parseFloat(params.value).toFixed(2)}%</div>
                        <div>人数: ${params.data.count}</div>
                         `;
                }
            },
            legend: {
                orient: 'vertical',
                right: '10%',         // 整体靠右对齐
                align: 'left',
                icon: 'circle', // 设置为圆形标记
                itemWidth: 8,  // 标记宽度
                itemHeight: 8, // 标记高度
            },
        };

        // 使用配置项渲染图表
        chartInstance2.setOption(option);
    })
}

const getInfo3 = () => {
    getResumeSub(dtVal5.value).then(res => {
        datas6.value = res.data;
        // 初始化 echarts 实例
        chartInstance3 = echarts.init(sexPie3.value);

        // 配置项
        const option = {
            textStyle: {
                fontSize: 16
            },
            series: [
                {
                    name: "学历分布",
                    type: "pie",
                    radius: "80%",
                    right: "25%",
                    label: {
                        formatter: (params: any) => {
                            if (Number(params.value) === 0) {
                                return '';
                            } else {
                                return `${params.percent.toFixed(2)}%`;
                            }
                        },
                        textStyle: {
                            fontSize: 16,
                            color: '#999999'
                        },
                        position: (params: any) => {
                            // 根据扇区角度大小决定位置
                            return params.percent > 10 ? 'inside' : 'outside';
                        }
                    },
                    data: datas6.value,
                },
            ],
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(255,255,255,0.9)',
                textStyle: { color: '#333' },
                borderColor: '#eee',
                borderWidth: 1,
                padding: 10,
                // 自定义tooltip格式
                formatter: (params) => {
                    return `
                        <div style="font-weight:bold">${params.name}</div>
                        <div>占比: ${parseFloat(params.value).toFixed(2)}%</div>
                        <div>人数: ${params.data.count}</div>
                         `;
                }
            },
            legend: {
                orient: 'horizontal',
                right: '18%',         // 整体靠右对齐
                align: 'left',
                icon: 'circle', // 设置为圆形标记
                itemWidth: 8,  // 标记宽度
                itemHeight: 8, // 标记高度
            },
        };

        // 使用配置项渲染图表
        chartInstance3.setOption(option);
    })
}

const getInfo4 = () => {
    getDistribution(dtVal4.value).then(res => {
        datas5.value = res.data;
        chartInstance4 = echarts.init(sexPie4.value);

        // 配置项
        const option = {
            textStyle: {
                fontSize: 16
            },
            series: [
                {
                    name: "员工分布",
                    type: "pie",
                    radius: "80%",
                    right: "25%",
                    label: {
                        formatter: (params: any) => {
                            if (Number(params.value) === 0) {
                                return '';
                            } else {
                                return `${params.percent.toFixed(2)}%`;
                            }
                        },
                        textStyle: {
                            fontSize: 16,
                            color: '#999999'
                        },
                        position: (params: any) => {
                            // 根据扇区角度大小决定位置
                            return params.percent > 10 ? 'inside' : 'outside';
                        }
                    },
                    data: datas5.value,
                },
            ],
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(255,255,255,0.9)',
                textStyle: { color: '#333' },
                borderColor: '#eee',
                borderWidth: 1,
                padding: 10,
                // 自定义tooltip格式
                formatter: (params) => {
                    return `
                        <div style="font-weight:bold">${params.name}</div>
                        <div>占比: ${parseFloat(params.value).toFixed(2)}%</div>
                        <div>人数: ${params.data.count}</div>
                         `;
                }
            },
            legend: {
                orient: 'vertical',
                type: 'scroll',
                right: '10%',         // 整体靠右对齐
                align: 'left',
                icon: 'circle', // 设置为圆形标记
                itemWidth: 8,  // 标记宽度
                itemHeight: 8, // 标记高度
                textStyle: {
                    color: '#333',
                    lineHeight: 13  // 设置行高，解决文字被遮挡的问题
                },
                pageTextStyle: {
                    color: '#fff'
                },
                pageIcons: {
                    vertical: ['image://', 'image://'],

                }
            },
        };

        // 使用配置项渲染图表
        chartInstance4.setOption(option);
    })
}

const getInfo5 = () => {
    getLose(dtVal3.value).then(res => {
        datas4.value = res.data;
        // 初始化 echarts 实例
        chartInstance5 = echarts.init(barCharts1.value);

        // 配置项
        const option = {
            textStyle: {
                fontSize: 16
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            // 图例，用于标识不同的数据系列
            legend: {
                data: ['离职率', '留存率'],
                right: '5%',
                icon: 'square', // 设置为圆形标记
                itemWidth: 8,  // 标记宽度
                itemHeight: 8,
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '18%',
                top: '20%',
                containLabel: true
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,  // 关联第一个x轴
                    start: 0,       // 初始显示范围的起始百分比
                    end: 20,        // 初始显示范围的结束百分比（显示20%的数据）
                    height: 10,     // 滚动条高度
                    bottom: 20
                }
            ],
            // x轴配置
            xAxis: {
                type: 'category',
                data: datas4.value[0].data,
                axisLine: { // X轴轴线样式
                    show: false,
                },
                axisTick: {
                    show: false,
                }
            },
            // y轴配置
            yAxis: {
                type: 'value',
                name: '单位：%',
                min: 0,
                max: 100,
                interval: 25,
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLine: { // Y轴轴线样式
                    show: false,
                }
            },
            // 系列数据配置
            series: [
                {
                    name: '离职率',
                    type: 'bar',
                    barWidth: 10,
                    barGap: 1,
                    data: datas4.value[2].data,
                    // 柱子的样式
                    itemStyle: {
                        color: '#0263ff'
                    },
                    label: {
                        show: true, // 显示标签
                        position: 'top', // 标签位置
                        color: '#999', // 标签颜色
                        fontSize: 16, // 标签字体大小
                        formatter: '{c}' // 标签格式
                    }
                },
                {
                    name: '留存率',
                    type: 'bar',
                    barWidth: 10,
                    barGap: 1,
                    data: datas4.value[1].data,
                    itemStyle: {
                        color: '#2ca761'
                    },
                    label: {
                        show: true, // 显示标签
                        position: 'top', // 标签位置
                        color: '#999', // 标签颜色
                        fontSize: 16, // 标签字体大小
                        formatter: '{c}' // 标签格式
                    }
                }
            ]
        };

        // 使用配置项渲染图表
        chartInstance5.setOption(option);
    })
}

const getInfo6 = () => {
    getCompanyAge(dtVal1.value).then(res => {
        datas3.value = res.data;
        // 初始化 echarts 实例
        chartInstance6 = echarts.init(barCharts2.value);

        // 配置项
        const option = {
            textStyle: {
                fontSize: 16
            },
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow'
                }
            },
            textStyle: {
                fontSize: 16
            },
            // 图例，用于标识不同的数据系列
            legend: {
                data: ['>5年', '3-5年', '1-3年', '3月-1年', '<3月'],
                right: '5%',
                icon: 'square', // 设置为圆形标记
                itemWidth: 8,  // 标记宽度
                itemHeight: 8,
            },
            // x轴配置
            xAxis: {
                type: 'value',
                interval: 25,
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            // y轴配置
            yAxis: {
                name: '单位：年',
                nameLocation: 'end', // 将名称放在Y轴顶部
                nameGap: 10, // 减小名称与轴线的距离
                nameRotate: 0, // 名称水平显示
                type: 'category',
                data: ['<3月', '3月-1年', '1-3年', '3-5年', '>5年'],
                axisLine: { // Y轴轴线样式
                    show: false,
                },
                axisTick: {
                    show: false,
                    alignWithLabel: true
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '0%',
                top: '24%',
                containLabel: true
            },
            // 系列数据配置
            series: [
                {
                    name: '>5年',
                    type: 'bar',
                    barWidth: 10,  // 柱子宽度
                    barGap: '-100%',
                    data: datas3.value[4],
                    itemStyle: {
                        color: '#3274A1',
                        borderRadius: [0, 3, 3, 0]
                    },
                    label: {
                        show: true,
                        position: 'right',
                        color: '#999',
                        fontSize: 16,
                        formatter: (params: any) => {
                            return `${params.value == 0 ? '' : params.value + '人'}`;
                        }
                    }
                },
                {
                    name: '3-5年',
                    type: 'bar',
                    barWidth: 10,  // 柱子宽度
                    barGap: '-100%',
                    data: datas3.value[3],
                    itemStyle: {
                        color: '#E1812C',
                        borderRadius: [0, 3, 3, 0]
                    },
                    label: {
                        show: true,
                        position: 'right',
                        color: '#999',
                        fontSize: 16,
                        formatter: (params: any) => {
                            return `${params.value == 0 ? '' : params.value + '人'}`;
                        }
                    }
                },
                {
                    name: '1-3年',
                    type: 'bar',
                    barWidth: 10,  // 柱子宽度
                    barGap: '-100%',
                    data: datas3.value[2],
                    itemStyle: {
                        color: '#3A923A',
                        borderRadius: [0, 3, 3, 0]
                    },
                    label: {
                        show: true,
                        position: 'right',
                        color: '#999',
                        fontSize: 16,
                        formatter: (params: any) => {
                            return `${params.value == 0 ? '' : params.value + '人'}`;
                        }
                    }
                },
                {
                    name: '3月-1年',
                    type: 'bar',
                    barWidth: 10,  // 柱子宽度
                    barGap: '-100%',
                    data: datas3.value[1],
                    itemStyle: {
                        color: '#6A3D9A',
                        borderRadius: [0, 3, 3, 0]
                    },
                    label: {
                        show: true,
                        position: 'right',
                        color: '#999',
                        fontSize: 16,
                        formatter: (params: any) => {
                            return `${params.value == 0 ? '' : params.value + '人'}`;
                        }
                    }
                },
                {
                    name: '<3月',
                    type: 'bar',
                    barWidth: 10,  // 柱子宽度
                    barGap: '-100%',
                    data: datas3.value[0],
                    itemStyle: {
                        color: '#D1495B',
                        borderRadius: [0, 3, 3, 0]
                    },
                    label: {
                        show: true,
                        position: 'right',
                        color: '#999',
                        fontSize: 16,
                        formatter: (params: any) => {
                            return `${params.value == 0 ? '' : params.value + '人'}`;
                        }
                    }
                }
            ]
        };

        // 使用配置项渲染图表
        chartInstance6.setOption(option);
    })
}

const getInfo7 = () => {
    getChange(dtVal2.value).then(res => {
        datas2.value = res.data;
        let totalMonth = res.count
        console.log(datas2.value[0].name)
        chartInstance7 = echarts.init(lineCharts.value);
        const newArr = datas2.value[0].data.concat(datas2.value[1].data).concat(datas2.value[2].data).concat(datas2.value[3].data)
        let maxValue = Math.max(...newArr);
        const remainder = maxValue % 5;
        if (remainder !== 0) {
            maxValue = maxValue + (5 - remainder);
        }

        let interval = 0;
        if (maxValue <= 5) {
            interval = 1;
        } else {
            interval = Math.ceil(maxValue / 5);
        }

        // 配置项
        const option = {
            textStyle: {
                fontSize: 16
            },
            tooltip: {
                trigger: 'axis'
            },
            // 图例，用于标识不同的数据系列
            legend: {
                data: [datas2.value[0].name, datas2.value[1].name, datas2.value[2].name, datas2.value[3].name],
                right: '5%',
                itemWidth: 8,
                itemHeight: 2
            },
            // x轴配置
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'].splice(0, totalMonth),
                boundaryGap: false
            },
            // y轴配置
            yAxis: {
                type: 'value',
                name: '单位：人',
                min: 0,
                max: maxValue,
                scale: false,
                interval: interval,
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '8%',
                top: '20%',
                containLabel: true
            },
            // 系列数据配置
            series: [
                {
                    name: datas2.value[0].name,
                    type: 'line',
                    data: datas2.value[0].data.splice(0, totalMonth),
                    itemStyle: {
                        color: '#0263ff'
                    },
                    lineStyle: {
                        color: '#0263ff'
                    },
                    symbol: 'circle',
                    symbolSize: 4
                },
                {
                    name: datas2.value[1].name,
                    type: 'line',
                    data: datas2.value[1].data.splice(0, totalMonth),
                    itemStyle: {
                        color: '#2ca761'
                    },
                    lineStyle: {
                        color: '#2ca761'
                    },
                    symbol: 'circle',
                    symbolSize: 4
                },
                {
                    name: datas2.value[2].name,
                    type: 'line',
                    data: datas2.value[2].data.splice(0, totalMonth),
                    itemStyle: {
                        color: '#c23531'
                    },
                    lineStyle: {
                        color: '#c23531'
                    },
                    symbol: 'circle',
                    symbolSize: 4
                },
                {
                    name: datas2.value[3].name,
                    type: 'line',
                    data: datas2.value[3].data.splice(0, totalMonth),
                    itemStyle: {
                        color: '#91c7ae'
                    },
                    lineStyle: {
                        color: '#91c7ae'
                    },
                    symbol: 'circle',
                    symbolSize: 4
                }
            ]
        };

        // 使用配置项渲染图表
        chartInstance7.setOption(option);
    });
}

const getInfo8 = () => {
    getStatistics().then(res => {
        console.log(res)
        datas1.value = res.data;
        chartInstance8 = echarts.init(chartRef.value, null, {
            width: 220, // 设置宽度
            height: 220, // 设置高度
        });

        // 配置项
        const option = {
            textStyle: {
                fontSize: 16
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)',
                position: 'top'
            },
            color: ['#1763f0', '#fe5c54', '#2ad4ad', '#fe7b42', '#9188e4'],
            series: [
                {
                    name: "员工管理",
                    type: "pie", // 设置图表类型为饼图（环形图）
                    radius: ["70%", "95%"], // 设置外半径和内半径，实现环形图效果
                    avoidLabelOverlap: false, // 避免标签重叠
                    label: {
                        show: false, // 是否显示标签（如果要显示百分比，可以设置为true并在formatter中格式化）
                        position: "center", // 标签的位置，默认为'top'，此处设置为'center'便于显示百分比标签
                    },
                    emphasis: {
                        // 高亮的样式设置
                        label: {
                            show: true, // 高亮时显示标签
                            fontSize: "16", // 字体大小调整，便于显示百分比数值等详细信息
                            fontWeight: "bold", // 字体加粗显示高亮部分信息
                        },
                    },
                    labelLine: {
                        // 标签的视觉引导线样式设置，默认为直线，此处不设置即为直线效果，可根据需要调整样式如颜色等。
                        show: false, // 是否显示引导线（在某些情况下可能需要隐藏引导线）
                    },
                    data: [
                        { value: datas1.value.zs, name: "正式员工" },
                        { value: datas1.value.fx, name: "风险员工" },
                        { value: datas1.value.sy, name: "试用期员工" },
                        { value: datas1.value.dlz, name: "待离职员工" },
                        { value: datas1.value.lz, name: "离职员工" },
                    ],
                },
            ],
        };

        // 使用配置项渲染图表
        chartInstance8.setOption(option);
    });
    // 初始化 echarts 实例
}

const initChart = () => {
    if (sexPie1.value) {
        getInfo1()
    }
    if (sexPie2.value) {
        getInfo2()
    }
    if (sexPie3.value) {
        getInfo3()
    }
    if (sexPie4.value) {
        getInfo4()
    }
    if (barCharts1.value) {
        getInfo5()
    }
    if (barCharts2.value) {
        getInfo6()
    }
    if (lineCharts.value) {
        getInfo7()
    }
    if (chartRef.value) {
        getInfo8()
    }
};


const resizeChart = () => {
    chartInstance1?.resize();
    chartInstance2?.resize();
    chartInstance3?.resize();
    chartInstance4?.resize();
    chartInstance5?.resize();
    chartInstance6?.resize();
    chartInstance7?.resize();
};

onMounted(() => {
    initChart();
    getDepartmentlist().then(res => {
        deptoptions.value = res.data;
    });
    // 监听窗口大小变化事件以支持响应式
    window.addEventListener("resize", resizeChart);
});

// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeChart);
    chartInstance1?.dispose(); // 销毁 echarts 实例
    chartInstance2?.dispose(); // 销毁 echarts 实例
    chartInstance3?.dispose(); // 销毁 echarts 实例
    chartInstance4?.dispose(); // 销毁 echarts 实例
    chartInstance5?.dispose(); // 销毁 echarts 实例
    chartInstance6?.dispose(); // 销毁 echarts 实例
    chartInstance7?.dispose(); // 销毁 echarts 实例
});
</script>

<style lang="scss" scoped>
::v-deep .el-input__wrapper {
    margin-right: 6px;
}

::v-deep .el-cascader__tags .el-tag {
    max-width: 100px;
}

::v-deep .el-input__inner {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.list {
    width: 100%;
    height: 100%;
}

.header_left {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.header_right {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    margin-left: 10px;
}

.zi1 {
    font-size: 18px;
    // font-family: 黑体;
    font-weight: 500;
}

.zi3 {
    font-size: 16px;
}

.tab_one {
    height: 43px;
    border: solid 1px #f5f5f5;
    border-radius: 4px;
    text-align: center;
    width: 190px;
    line-height: 43px;
    margin: 0 10px;
}

.tab_one.on {
    border-color: #01509f;
    color: #01509f;
}

.tab_kuai {
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    font-size: 14px;
    margin-right: 10px;
}

.tab_kuai.on {
    background-color: #f3f8fb;
    color: #01509f;
}

.zi_num {
    font-size: 24px;
    font-weight: bold;
}

.y1::before {
    content: "";
    /* 使用空内容 */
    display: inline-block;
    /* 使元素为内联块元素 */
    width: 8px;
    /* 圆点宽度 */
    height: 8px;
    /* 圆点高度 */
    border-radius: 50%;
    /* 创建圆形 */
    background-color: #1763f0;
    /* 圆点颜色 */
    margin-right: 5px;
    /* 圆点和文本之间的间距 */
    /* 圆点和文本之间的间距 */
    position: absolute;
    top: 6px;
    left: -14px;
}

.y2::before {
    content: "";
    /* 使用空内容 */
    display: inline-block;
    /* 使元素为内联块元素 */
    width: 8px;
    /* 圆点宽度 */
    height: 8px;
    /* 圆点高度 */
    border-radius: 50%;
    /* 创建圆形 */
    background-color: #fe5c54;
    /* 圆点颜色 */
    margin-right: 5px;
    /* 圆点和文本之间的间距 */
    /* 圆点和文本之间的间距 */
    position: absolute;
    top: 6px;
    left: -14px;
}

.y3::before {
    content: "";
    /* 使用空内容 */
    display: inline-block;
    /* 使元素为内联块元素 */
    width: 8px;
    /* 圆点宽度 */
    height: 8px;
    /* 圆点高度 */
    border-radius: 50%;
    /* 创建圆形 */
    background-color: #2ad4ad;
    /* 圆点颜色 */
    margin-right: 5px;
    /* 圆点和文本之间的间距 */
    /* 圆点和文本之间的间距 */
    position: absolute;
    top: 6px;
    left: -14px;
}

.y4::before {
    content: "";
    /* 使用空内容 */
    display: inline-block;
    /* 使元素为内联块元素 */
    width: 8px;
    /* 圆点宽度 */
    height: 8px;
    /* 圆点高度 */
    border-radius: 50%;
    /* 创建圆形 */
    background-color: #fe7b42;
    /* 圆点颜色 */
    margin-right: 5px;
    /* 圆点和文本之间的间距 */
    /* 圆点和文本之间的间距 */
    position: absolute;
    top: 6px;
    left: -14px;
}

.y5::before {
    content: "";
    /* 使用空内容 */
    display: inline-block;
    /* 使元素为内联块元素 */
    width: 8px;
    /* 圆点宽度 */
    height: 8px;
    /* 圆点高度 */
    border-radius: 50%;
    /* 创建圆形 */
    background-color: #9188e4;
    /* 圆点颜色 */
    margin-right: 5px;
    /* 圆点和文本之间的间距 */
    /* 圆点和文本之间的间距 */
    position: absolute;
    top: 6px;
    left: -14px;
}

.num_kuai {
    width: 30%;
    margin-top: 10px;
    margin-right: 10px;
    text-align: left;
    position: relative;
}


.boardBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow-y: scroll;
    height: 100%;

    &::-webkit-scrollbar {
        display: none;
    }

    -ms-overflow-style: none;
    scrollbar-width: none;

    .boardItem {
        background-color: #fff;
        border-radius: 12px;
        margin-right: 16px;
        margin-bottom: 16px;
        width: calc((100% - 32px)/2);
        height: 360px;
        box-sizing: border-box;
        padding: 17px;

        .boardItemValue {
            font-size: 28px;
            //font-weight: bolder;
            margin-left: 20px;
        }

        .echartsClass {
            padding: 38px 0px 44px 0px;
            box-sizing: border-box;
            width: 100%;
            height: 320px;
        }

        .echartsClass1 {
            padding: 16px 0px 9px 0px;
            box-sizing: border-box;
            width: 100%;
            height: 320px;
        }

        .boardItemTop {
            width: 100%;
            display: flex;
            height: 30px;
            align-items: center;

            .boardItemTitle {
                color: #333333;
                font-size: 20px;
                font-weight: bolder;
                height: 30px;
                flex: 1;
                width: 200px;
            }

            .selectClass {
                width: 158px;
                box-sizing: border-box;
                margin-right: 6px;
            }

            .dateClass {
                width: 184px;
                box-sizing: border-box;
                margin-right: 6px;
            }

            .exportBtn {
                width: 60px;
                height: 30px;
                border-radius: 6px;
                background-color: #01509f;
                line-height: 30px;
                font-size: 14px;
                color: #fff;
                text-align: center;
                cursor: pointer;
            }
        }
    }
}
</style>
